<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>百胜中国</title>
        <link rel="icon" href="imgs/logo.c306df21.png" type="image/x-icon" />
        <style>
            #outer{
                /* border: 1px solid #ccc; */
                width: 1226px;
                height: 100px;
                /* div居中显示 */
                margin: auto;
            }
            .logo{
                width: 80px;
                height: 80px;
                float: left;
            }

            .logo img{
                width: 80px;
                height: 80px;
                margin-top: 20px;
            }

            .nav{
                width: 850px;
                height: 100px;
                /* border: 1px solid red; */
                float: left;
            }

            .nav ul{
                list-style: none;
                padding: 28px 0 0 30px;
                position: relative;
                display: flex;
                justify-content: space-around;
            }
            
            .nav a{
                font-size: 16px;
                color: #333;
                text-decoration: none;
            }
            .nav li{
                float: left;
                margin-left: 30px;
            }
            
            .nav a:hover{
                color: red;
            }
            .nav ol{
                display: none;
                float: left;
            }
            .nav>ul:hover ol{
                display: block;
            }

            .nav>ul>li:nth-child(1){
                width: 127px;
                padding-right: 15px;
            }

            .right{
                width: 296px;
                height: 100px;
                /* border: 1px solid green; */
                float: right;
                padding-top: 28px;
                box-sizing: border-box;
            }
            .right form{
                width: 296px;
                height: 50px;
                position: relative;
            }
            .right input{
                width: 223px;
                height: 48px;
                padding: 0 10px;
                border: 1px solid #e0e0e0;
            }

            .right button{
                position: absolute;
                right: 0;
                width: 52px;
                height: 50px;
                line-height: 24px;
                background: #fff;
                border: 1px solid #e0e0e0;
                transition: all .2s linear;
            }

            .right button:hover{
                background-color: red;
                color: white;
            }
        
        </style>
    </head>
    <body>
        <div id="outer">
            <div class="logo">
                <img src="imgs/logo.c306df21.png" alt="">
            </div>
            <div class="nav">
                <ul>
                    <li><a href="#">关于百胜中国</a>
                        <ol>
                            <li><a href="#">公司简介</a></li>
                            <li><a href="#">品牌家族</a></li>
                            <li><a href="#">公司荣誉</a></li>
                        </ol>
                    </li>
                    <li><a href="#">可持续发展</a></li>
                    <li><a href="#">新闻中心</a></li>
                    <li><a href="#">企业招募</a></li>
                    <li><a href="#">品牌加盟</a></li>
                    <li><a href="#">供应商招募</a></li>
                    <li><a href="#">投资者关系</a></li>
                </ul>
            </div>
            <div class="right">
                <form action="">
                    <input type="text" placeholder="">
                    <button type="button">搜索</button>
                </form> 
            </div>
        </div>
    </body>
</html>